<template>
  <el-dialog v-model="visible" title="选择平台" width="600px" center>
    <div class="platform-grid">
      <div
        v-for="platform in platforms"
        :key="platform.code"
        class="platform-item"
        @click="selectPlatform(platform)"
      >
        <img
          :src="`/logo/${platform.code}.png`"
          :alt="platform.name"
          class="logo"
        />
        <p class="name">{{ platform.name }}</p>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits } from "vue";

const props = defineProps({
  platforms: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(["select"]);

const visible = ref(false);

const selectPlatform = (platform) => {
  emit("select", platform);
  visible.value = false;
};

const show = () => {
  visible.value = true;
};

defineExpose({
  show,
});
</script>

<style scoped>
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.platform-item {
  cursor: pointer;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  transition: all 0.3s;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.platform-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 10px;
}

.name {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}
</style>
